<template>
    <div class="wrapper">
        <van-nav-bar title="个人信息" left-text left-arrow @click-left="$router.go(-1)" />
        <div class="box">
            <info-cont title="头像" :avatar="listData.avatar" @avatarFun="avatar"></info-cont>
            <info-cont title="昵称" :nickname="listData.nickname" @avatarFun="nickFn(0)"></info-cont>
            <info-cont title="手机号" :nickname="listData.mobile"></info-cont>
            <info-cont title="性别" :nickname="listData.sex==0?'男':'女'" @avatarFun="nickFn(1)"></info-cont>
            <info-cont title="出生日期" :nickname="listData.birthday"></info-cont>
            <info-cont title="所在城市" :nickname="listData.province_name+'-'+listData.city_name+'-'+listData.district_name"
                @avatarFun="city"></info-cont>
            <!-- <div class="info-item" @click="avatar">
                <span >头像</span>
                <div class="info-det">
                    <img style="width:37px;height:37px" :src="listData.avatar" alt />
                    <span >></span>
                </div>
            </div>
            <div class="info-item" @click="$router.push(`/set-info?tag=nickname&value=${listData.nickname}`)">
                <span >昵称</span>
                <div class="info-det">
                    <span>{{listData.nickname}}</span>
                    <span >></span>
                </div>
            </div>
            <div class="info-item">
                <span >手机号</span>
                <div class="info-det">
                    <span>{{listData.mobile}}</span>
                    <span ></span>
                </div>
            </div>
            <div class="info-item" @click="$router.push(`/set-info?tag=sex&value=${listData.sex}`)">
                <span >性别</span>
                <div class="info-det">
                    <span v-if="listData.sex == 0">男</span>
                    <span v-else>女</span>
                    <span >></span>
                </div>
            </div>
            <div class="info-item" @click="birthday">
                <span >出生日期</span>
                <div class="info-det">
                    <span>{{listData.birthday}}</span>
                    <span >></span>
                </div>
            </div>
            <div class="info-item" @click="city">
                <span >所在城市</span>
                <div class="info-det">
                    <span
                    >{{listData.province_name}}-{{listData.city_name}}-{{listData.district_name}}</span>
                    <span >></span>
                </div>
            </div> -->
            <!-- <div
          class="info-item"
          @click="$router.push(`/set-info?tag=subjects&value=${JSON.stringify(listData.attr)}`)"
        >
          <span >学科</span>
          <div class="info-det">
            <span
            
              v-for="(item,index) in listData.attr"
              :key="index"
            >{{item.attr_value}}</span>
  
            <span >></span>
          </div>
        </div>
        <div class="info-item" @click="show4 = true">
          <span >年级</span>
          <div class="info-det">
            <span>{{listData.attr[0].attr_value}}</span>
            <span v-if="listData.attr.length == 0">请选择</span>
            <span >></span>
          </div>
        </div>-->
        </div>

        <van-action-sheet v-model="show1">
            <div class="content">
                <p>拍照</p>
                <p>
                    <van-uploader :after-read="afterRead">从手机相册选择</van-uploader>
                </p>
                <p>取消</p>
            </div>
        </van-action-sheet>
        <van-action-sheet v-model="show2">
            <van-datetime-picker v-model="currentDate" confirm-button-text cancel-button-text type="date" title="选择年月日"
                :min-date="minDate" :max-date="maxDate" @confirm="confirms" @cancel="cancel" />
        </van-action-sheet>

        <van-action-sheet v-model="show3">
            <van-area :area-list="areaList" @confirm="onConfirm1" @cancel="showArea = false" />
        </van-action-sheet>
        <van-action-sheet v-model="show4">
            <van-picker title="标题" show-toolbar :columns="columns" @confirm="onConfirm2" @cancel="onCancel"
                @change="onChange" />
        </van-action-sheet>
    </div>
</template>
  
<script>
import { getUserInfoPort, setInfoPort, getAttributePort, getImgPort } from '@/api/main'
import area from '@/assets/area'
import InfoCont from '@/components/info-cont.vue'
export default {
    data() {
        return {
            value: '',
            showArea: false,
            areaList: {},
            listData: [],
            show1: false,
            show2: false,
            show3: false,
            show4: false,
            minDate: new Date(2000, 0, 1),
            maxDate: new Date(2021, 1, 1),
            currentDate: new Date(),
            columns: [],
            grade: [],
            attr_id: 1,
            data: null
        }
    },
    computed: {},
    created() { },
    mounted() {
        this.areaList = area
        this.gettUserInfo()
        // this.gettAttribute()
    },
    watch: {},
    methods: {
        async gettUserInfo() {
            let res = await getUserInfoPort()
            console.log(res)
            if (res.code == 200) {
                this.listData = res.data
            }
        },
        // 点击头像
        avatar() {
            this.show1 = true
        },
        async afterRead(file) {
            console.log(file)
            var formData = new FormData() //构造一个 FormData，把后台需要发送的参数添加
            formData.append('file', file.file) //接口需要传的参数
            this.data = formData
            // console.log(formData.get('file'))
            let res = await getImgPort(formData)
            console.log(res)
            if (res.code == 200) {
                let resdata = await setInfoPort({ avatar: res.data.path })
                console.log(resdata)
                if (resdata.code == 200) {
                    // this.$router.go(0)
                    this.gettUserInfo()
                }
                this.show1 = false
            }
            this.show1 = false
        },
        //更改昵称
        nickFn(v) {
            if(v==0){
                this.$router.push(`/set-info?tag=nickname&value=${this.listData.nickname}`)
            }else if(v ==1){
                this.$router.push(`/set-info?tag=sex&value=${this.listData.sex}`)
            }else{
                this.$router.push(`/set-info?tag=subjects&value=${JSON.stringify(this.listData.attr)}`)
            }
            
        },
        // 点击出生日期
        birthday() {
            this.show2 = true
        },
        // 点击生日确定按钮
        async confirms(val) {
            console.log(val)
            let a = String(val).split(' ')
            console.log(a)
            let b, c, d
            if (a[1] == 'Jan') {
                b = '01'
            } else if (a[1] == 'Feb') {
                b = '02'
            } else {
            } // console.log(a[3]+'-'+a[2]+'-'+b)
            let bir = a[3] + '-' + b + '-' + a[2]
            console.log(bir)

            let res = await setInfoPort({ birthday: bir })
            console.log(res)
            if (res.code == 200) {
                // this.$router.go(0)
            }
        },
        // 点击生日取消按钮
        cancel() {
            this.show2 = false
        },
        // 点击选择城市
        city() {
            this.show3 = true
        },
        async onConfirm1(values) {
            console.log(values)
            let city_id = values[0].code
            let province_id = values[1].code
            let district_id = values[2].code

            let res = await setInfoPort({ city_id, district_id, province_id })
            console.log(res)
            if (res.code == 200) {
                this.$router.go(0)
            }
        },
        async gettAttribute() {
            let res = await getAttributePort()
            console.log(res)
            let data = res.data[0].value
            this.grade = res.data[0].value
            data.forEach(item => {
                this.columns.push(item.name)
            })
            this.columns.push(res.data)
        },
        async onConfirm2(value, index) {
            console.log(value, index)
            let data = this.grade.filter(item => {
                return item.name == value
            })
            let arr = []
            arr.push({ attr_id: this.attr_id, attr_val_id: data[0].id }, { attr_id: 2, attr_val_id: 24 })
            console.log(data)
            console.log(arr)
            let res = await setInfoPort({ user_attr: JSON.stringify(arr) })
            console.log(res)
            if (res.code == 200) {
                this.$router.go(0)
            }
        },
        onChange(picker, value, index) {
            console.log(picker, value, index)
        },
        onCancel() {
            this.show4 = false
        }
    },
    components: { InfoCont }
}
</script>
  
<style lang="scss" scoped>
.wrapper {
    width: 750px;

    background: #fff;
}

.van-nav-bar {
    height: 60px;
}

.info-item {
    width: 720px;
    height: 85px;
    padding: 0 15px;
    display: flex;
    font-size: 20px;
    justify-content: space-between;
    align-items: center;

    .info-det {
        display: flex;
        align-items: center;

        span {
            margin-left: 15px;
        }
    }
}

.content {
    padding: 16px 16px 10px;

    p {
        width: 100%;
        font-size: 25px;
        text-align: center;
        line-height: 40px;
    }
}
</style>
  